<template>
  <div>
    <el-card style="margin:20px 0">
      <CategorySelector></CategorySelector>
    </el-card>

    <el-card>
      <!-- 下方咱们可能会展示三个结构 每个结构都定义成了一个组件 spu的列表  添加spu和修改spu  添加sku -->
      <!-- 只能显示一个 所以要做条件渲染 showState： SpuList==>1 SpuForm==>2  SkuForm==>3 -->
      <SpuList v-if="showState === 1" @setShowState="setShowState"></SpuList>
      <SpuForm v-if="showState === 2" @setShowState="setShowState" :spu="spu"></SpuForm>
      <SkuForm v-if="showState === 3"  @setShowState="setShowState"></SkuForm>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'Spu',
})
</script>

<script lang="ts" setup>
import SpuList from './SpuList/index.vue'
import SpuForm from './SpuForm/index.vue'
import SkuForm from './SkuForm/index.vue'
import { ref } from 'vue'
import type { SpuData } from '@/api/spu'
// 定义一个显示不同组件的状态数据
const showState = ref(1)
// 定义一个初始数据(spu)
const spu = ref<SpuData>({
  category3Id: '',
  description: '',
  spuName: '',
  tmId: '',
  spuImageList: [],
  spuSaleAttrList: [],
})
// 给子组件绑定自定义事件 从而完成显示对应组件
function setShowState(num: number, row: SpuData) {
  // 根据子组件传递饿最新数据 来去修改showState数据
  showState.value = num
  // 如果点击修改spu row是spu对象  如果点击添加spu row是undefined
  if (row) { //修改
    // 这里不涉及深拷贝和浅拷贝  因为咱们上方三个组件条件渲染时使用的是v-if  从spuList组件来到SpuForm组件  spuList组件销毁了(里面的数据就没了)
    // 再次回到spuList组件执行立即监视的逻辑 重新发送请求获取最新数据!!!
    spu.value = row
  } else { //不是修改
    // 咱们给spuForm组件传递过去的spu数据 其实就是这个组件要去收集的那个数据
    spu.value = {
      category3Id: '',
      description: '',
      spuName: '',
      tmId: '',
      spuImageList: [],
      spuSaleAttrList: [],
    }
  }
}
</script>

<style scoped></style>